<template>
    <view class="timetable">


        <view class="header">
            <view class="header-item" v-for="(item,index) in week" :key="item"
                  :style="{ color: todayWeekIndex === index ? '#4070FF' : 'unset' }">{{ item }}
            </view>
        </view>

        <view class="main-table">
            <view class="row" v-for="(item,index) in timetableType" :key="index">
                <view class="time-item-table">
                    <view class="index">{{ item.index }}</view>
                    <view class="time">{{ item.name }}</view>
                </view>
            </view>

            <view class="course-container">
                <view class="week" v-for="(week, weekIndex) in courseData" :key="weekIndex">
                    <view class="courseList" v-for="(course, courseIndex) in week" :key="courseIndex">
                        <view @click="handleCourseClick(course, weekIndex, courseIndex)" class="course"
                              :style="{ height: (course.length * 75 + (course.length-1)*5) + 'px', background: course.backgroundColor }"
                              v-if="course.length > 0">{{ course.name }}<br>{{ course.data.room }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'Timetable',
    props: {
        timetableType: {
            type: Array,
            default: () => {
                return [
                    {index: '1', name: '08:00\n08:45'},
                    {index: '2', name: '08:55\n09:40'},
                    {index: '3', name: '10:00\n10:45'},
                    {index: '4', name: '10:55\n11:40'},
                    {index: '5', name: '14:00\n14:45'},
                    {index: '6', name: '14:55\n15:40'},
                    {index: '7', name: '16:00\n16:45'},
                    {index: '8', name: '16:55\n17:40'},
                    {index: '9', name: '19:00\n19:45'},
                    {index: '10', name: '19:55\n20:40'},
                    {index: '11', name: '21:00\n21:45'},
                    {index: '12', name: '21:55\n22:40'}
                ]
            }
        },
        week: {
            type: Array,
            default: () => {
                return ['一', '二', '三', '四', '五', '六', '日']
            }
        },
        timetables: {
            type: Array,
            default: () => {
                return []
            }
        },
        palette: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {

            allPalette: [...this.palette, '#f05261', '#48a8e4', '#ffd061', '#52db9a', '#70d3e6', '#52db9a', '#3f51b5', '#f3d147', '#4adbc3', '#673ab7', '#f3db49', '#76bfcd', '#b495e1', '#ff9800', '#8bc34a']
        }
    },
    computed: {
        courseData() {
            // 为数据标记背景颜色的函数
            let paletteIndex = 0
            const getBackgroundColor = () => {
                const backgroundColor = this.allPalette[paletteIndex]
                paletteIndex++
                if (paletteIndex >= this.allPalette.length) {
                    paletteIndex = 0
                }
                return backgroundColor
            }

            // 合并
            const listMerge = []
            this.timetables.forEach(function (list, i) {
                if (!listMerge[i]) {
                    listMerge[i] = []
                }
                list.forEach(function (item, index) {
                    if (!index) {

                        return listMerge[i].push({
                            name: item.name,
                            data: item,
                            length: 1,
                            backgroundColor: item === '' ? 'none' : getBackgroundColor()
                        })
                    }
                    if (item.name === (listMerge[i][index - 1] || {}).name && item.room === (listMerge[i][index - 1] || {}).data.room && item) {
                        const sameIndex = (listMerge[i][index - 1] || {}).sameIndex
                        if (sameIndex || sameIndex === 0) {
                            listMerge[i][sameIndex].length++
                            return listMerge[i].push({
                                name: item.name,
                                data: item, length: 0,
                                sameIndex: sameIndex
                            })
                        }
                        listMerge[i][index - 1].length++
                        return listMerge[i].push({
                            name: item.name,
                            data: item, length: 0,
                            sameIndex: index - 1})
                    } else {
                        return listMerge[i].push({
                            name: item.name,
                            data: item,
                            length: 1,
                            backgroundColor: item === '' ? 'none' : getBackgroundColor()
                        })
                    }
                })
            })
            return listMerge;
        },
        todayWeekIndex() {
            let weekIndex = new Date().getDay() - 1
            if (weekIndex === -1) {
                weekIndex = 6
            }
            return weekIndex
        }
    },
    methods: {

        handleCourseClick(course, weekIndex, courseIndex) {
            const data = {
                index: courseIndex + 1,
                length: course.length,
                week: this.week[weekIndex],
                weekIndex: weekIndex,
                name: course.name,
                room: course.data.room,
                teacher: course.data.teacher,
                class: course.data.class,
                data: course.data
            }

            console.log(data)

            if (data.name) {

                //仅仅是课程表
                if (data.data.type == '0') {
                    uni.showModal({
                        title: `星期${data.week}; 第${data.index}节课`,
                        content: "📖课程名称：" + data.name + "\n🏢教室：" + data.room + "\n🧑‍🏫教师:" + data.teacher + "\n🧑‍🎓教学班：" + data.class,
                        success: (res) => {

                        }
                    })
                } else if (data.data.type == '1') {

                    let calendar = data.data.calendar;

                    //仅仅是日程
                    uni.showModal({
                        title: `${calendar.startTime}-${calendar.endTime}`,
                        content: "📅日程：" + calendar.title + "\n📃主要内容：" + (calendar.description === null ? '无' : calendar.description),
                        success: (res) => {

                        }
                    })
                } else {
                    let calendar = data.data.calendar;
                    uni.showModal({
                        title: `星期${data.week}; 第${data.index}节课`,
                        content: "📖课程名称：" + data.name + "\n🏢教室：" + data.room + "\n🧑‍🏫教师:" + data.teacher + "\n🧑‍🎓教学班：" + data.class +
                            "\n📅日程：" + calendar.title + "\n📃主要内容：" + (calendar.description === null ? '无' : calendar.description) +
                            "\n⏱️开始时间：" + calendar.startTime + "\n⌚结束时间：" + calendar.endTime,
                        success: (res) => {

                        }
                    })
                }

            }
            this.$emit('courseClick', data)
        }
    }
}
</script>

<style scoped lang="scss">

* {
    border: 10rpx;
}

.timetable {
    background: white;
    border: 1px solid #E4E7ED;
    border-radius: 8rpx;

    .header {
        width: 100%;
        padding-left: 88rpx;
        height: 56rpx;
        display: flex;
        align-items: center;
        background: #F5F7FA;

        .header-item {
            flex: 1;
            text-align: center;
        }
    }

    .main-table {
        position: relative;

        .row {
            height: 80px;
            position: relative;

            &:after {
                content: '';
                height: 0;
                // width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                border-bottom: 1rpx dashed #E4E7ED;
            }

            .time-item-table {
                margin-left: 0px;
                height: 100%;
                width: 80rpx;
                text-align: center;
                background: #F5F7FA;

                .index {
                    color: #909399;
                    padding-bottom: 8rpx;
                    padding-top: 16rpx;
                }
            }
        }

        .course-container {
            position: absolute;
            top: 0;
            left: 88rpx;
            width: calc(100% - 88rpx);
            height: 100%;


            display: flex;

            .week {
                flex: 1;
                width: 0;
                flex-grow: 1;
                display: flex;
                flex-direction: column;

                .courseList {
                    word-break: break-all;
                    color: white;
                    overflow: hidden;

                    .course {
                        height: 75px;
                        margin-left: 3px;
                        margin-top: 5px;
                        padding: 8rpx;
                        border-radius: 16rpx;
                        text-align: center;
                        font-size: 12px;
                    }
                }
            }
        }
    }
}
</style>
